<template>
  <div class="div1">
    <div>客服电话： 028-0225-2256</div>
    <div>
      <a href="#">登陆 |</a>
      <a href="#"> 注册 |</a>
      <a href="#"> 我的订单 |</a>
      <a href="#"> 连系我们</a>
    </div>
  </div>
  <div style="display:flex;justify-content: space-around">
    <div>
      <div class="heart"></div><h1 style="margin-left: -50px"><span class="span">LOVO</span></h1>
    </div>
   <div style="width: 400px;margin-top: 30px">
     <el-steps :active="active" finish-status="success">
       <el-step title="加入购物车"></el-step>
       <el-step title="立即下单"></el-step>
       <el-step title="确认订单"></el-step>
     </el-steps>
   </div>
  </div>

  <div class="div2">
    <el-page-header @click="$router.push('shopping')" content="返回我的购物车" style="border-bottom: 1px solid black;padding-bottom: 20px">
    </el-page-header>
    <div>
      <div class="div3">
        <span class="span">配送方式</span>
        <el-radio-group v-model="checkboxGroup1">
          <el-radio-button  style="width: 100px" size="large"  v-for="city in cities" :label="city.value" :key="city.key" @click="aaaa(city.key)"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="div3">
        <span class="span">收货地址</span>
        <el-select style="margin-right: 30px"></el-select>
<!--        根据上面的收货人，查询出此收货人的详细地址信息 赋值给改变量-->
        {{address}}
      </div>

      <div class="div3">
        <span class="span">支付方式</span>
        <el-tag>在线支付</el-tag>
      </div>

      <div class="div3" style="display: flex">
        <span class="span">商品信息</span>
        <div style="width: 1200px">
            <el-table
                :data="tableData"
                height="120"
                style="width: 100%">
              <el-table-column
                  prop="date"
                  label="商品图片"
                 >
                <div class="demo-image">
                  <div class="block" :model="fits">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="url"
                        :fit="fit"></el-image>
                  </div>
                </div>
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="商品名"
                  >
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="商品规格">
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="总价">
              </el-table-column>
            </el-table>
        </div>
      </div>

      <div class="div3" style="display:flex;">
        <div style="width: 50px">备注</div>
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
        </el-input>
      </div>

      <div style="display: flex;line-height: 60px;width: 1000px;justify-content: space-evenly;margin-left: 445px">
        <div>总金额:&nbsp;￥&nbsp;{{totalPrice}}</div>
        <div>配送费:&nbsp;￥&nbsp;{{deliveryFees}}</div>
        <div>配送费:&nbsp;￥&nbsp;<span style="font-size: 20px;color: red">{{totalAmount}}</span></div>
        <div><el-button type="danger" @click="$router.push('buy')">提交订单</el-button></div>
      </div>
    </div>
  </div>

</template>

<script>
const cityOptions = [{key:0,value:"配送"},{key:1,value:"自取"}];
export default {
  data() {
    return {
      textarea:"",
      fits: 'scale-down',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      ],
      active:1,
      cities: cityOptions,
      checkboxGroup1: '配送',
      address:"黄班长心里",
    }
  },
  methods:{
    aaaa(key){
      console.log(key)
    }
  }
}
</script>

<style scoped>
.span{
  margin-right: 30px;
}
.div3{
  padding: 30px 0 ;
  border-bottom: 1px solid #909399;
}
.div2{
  width: 80%;
  margin: auto;
}
.div1 {
  margin: 15px 0 0 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  background-color: red;
  color: white;
}

.div1 a {
  color: white;
  text-decoration: none;
}
.heart{
  width: 20px;
  height: 20px;
  background: red;
  transform: rotate(45deg) scale(.5);
  animation-name: hd;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  position: absolute;
  top: 68px;
  left: 200px;
}
.heart::before{
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: red;
  transform: translateX(-10px);
}
.heart::after{
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  background: red;
  transform: translateY(-10px);
}
@keyframes hd {
  25%{
    transform: rotate(45deg) scale(1);
  }
  50%{
    transform: rotate(45deg) scale(.5);
  }
  75%{
    transform: rotate(45deg) scale(1);
  }
  to{
    transform: rotate(45deg) scale(.5);
  }
}
</style>